
<template>
    <div class="wrap">
            <div class="user flex space-between align-center van-hairline--bottom">
                <div class="flex align-center">
                    <img :src="avatar" class="icon" alt="">
                    <div class="name">{{name}} <span>{{uid}}</span></div>
                    <span class="toggle" style="margin-left:10px;" v-if="name||uid" @click="logout">退出</span> 
                </div>
                <span class="toggle" @click="toggle">切换</span> 
            </div>
            <van-search v-model="keyword" placeholder="搜索" @search="searchHandle" />
            <van-swipe class="my-swipe"  :height="118" indicator-color="white">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image" class="swiper-img" alt="">
                </van-swipe-item>
            </van-swipe>
            <div class="title">项目文件</div>
        <!-- <van-collapse :value="activeNames" bind:change="onChange" :border="false">
            <van-collapse-item title="有赞微商城" :name="idx+1" :is-link="false" :border="false" v-for="(project,idx) in projects" :key="idx">
                <div slot="title" style="position:relative;">
                    <img src="../assets/wblue.png" width="12" height="14" alt="">
                    {{project.title}}
                </div>
                <div v-for="(task,ix) in project.tasks" :key="ix" style="padding-top:10px;" class="van-hairline--bottom">
                    <div class="task-title flex ">
                        <div style="width: 35px;" class="flex">
                            <span>{{ix + 1}}</span>     
                            <img src="../assets/wgreen.png" style="margin: 4px 8px;" width="12" height="14" />
                        </div>
                        <span style="flex:1;">{{task.title}} <span :class="task.type=='招投标'?'orange':task.type=='国标'?'blue':'green'">{{task.type}}</span></span>    
                        <div style="width:80px;margin-left: 14px;color: #999;">{{task.time}}</div>    
                    </div>
                    <div class="task-total flex space-between">
                        <span>负责人： {{task.leader}}</span>
                        <span>合计(万元)：<span style="font-weight: 700;">{{task.total}}</span></span>
                    </div>
                </div>
            </van-collapse-item>
        </van-collapse> -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :immediate-check="false"
        >
            <div v-for="(task,ix) in data" :key="ix" style="padding-top:10px;" class="van-hairline--bottom" @click="gotoTable(task)">
                <div class="task-title flex ">
                    <div  class="flex align-center">
                        <span>{{ix + 1}}</span>     
                        <img :src="task.LEIBIE == '分类' ? require('../assets/wblue.png') : require('../assets/wgreen.png')" style="margin: 4px 8px;" width="12" height="14" />
                    </div>
                    <span class="flex align-center van-multi-ellipsis--l2" style="flex:1;">{{task.NAME | cutlength}} <span v-if="task.PROJECT_CAT" :class="task.PROJECT_CAT=='招投标'?'orange':task.type=='国标'?'blue':'green'">{{task.PROJECT_CAT}}</span></span>    
                    <div style="width:80px;margin-left: 14px;color: #999;">{{task.adddate}}</div>    
                </div>
                <div class="task-total flex space-between" v-if="task.LEIBIE != '分类'">
                    <span>负责人： {{name}}</span>
                    <span>合计(万元)：<span style="font-weight: 700;">{{task['造价']}}</span></span>
                </div>
            </div>
        </van-list>
            <van-dialog v-model="show" title="切换用户" :showConfirmButton="false" closeOnClickOverlay @close="closeHandle">
                <van-cell :title="user.NAME" v-for="(user,idx) in userList" center :key="idx" is-link @click="chooseUser(user)">
                    <template slot="icon">
                        <img :src="avatar" style="width: 12px;height: 14px;margin-right: 8px;" alt="">
                    </template>
                </van-cell>
                <div slot="title" style="position:relative;">
                    切换用户
                    <img src="../assets/close.png" width="12" @click="closeHandle" class="close-icon" height="14" alt="">
                </div>
            </van-dialog>
    </div>
</template>

<script>
import { getUserList } from '../api/userList'
import { getTask } from '../api/taskList'
import { search } from '../api/search'
import { getItem,setItem } from '../utils/session'
import { removeToken } from '../utils/token'
export default {
    name: 'index',
    computed: {
    },
    filters: {
        cutlength(value) {
            let str = ""
            value.length > 24 ? str = (value.slice(0,24) + '...') : str = value
            return str
        }
    },
    data() {
        return {
            loading: false,
            finished: false,
            keyword: "",
            show: false,
            page: 1,
            pageSize: 10,
            name: "",
            uid: "",
            avatar: require("../assets/person.png"),
            images: [
                require("../assets/source.png"),
                require("../assets/source.png")
            ],
            userList: [
                {
                    NAME: "张三",
                    ID: 'User'
                },
                {
                    NAME: "李四",
                    ID: 'User'
                },
                {
                    NAME: "王五",
                    ID: 'User'
                }

            ],
            activeNames: [2],
            data: [],
            timer: null
        }
    },
    methods: {
        logout() {
            this.$dialog.confirm({
                title: '提示',
                message: '确认退出登录吗？',
            })
            .then(() => {
                removeToken()
                this.$router.replace('/login')
            })
            .catch(() => {
                // on cancel
            });
        },
        onLoad() {
            if(this.loading) {
                this.timer = setTimeout(() => {
                    this.getTask()
                    this.timer = null
                }, 500);
            }
        },
        gotoTable(task) {
            if(task.LEIBIE == '分类') return;
            let str = ""  // baojia 进入到 报价表  gaisuan 进入概算表
            if(task.PROJECT_CAT == '招投标' || task.PROJECT_CAT == '国标清单') {
                str = 'baojia'
            }else if(task.PROJECT_CAT == '概预算') {
                str = 'gaisuan'
            }
            setItem('databasename', task.databasename)
            setItem('cate', str)
            setItem('taskname',task.NAME)
            setItem('project_name', task.PROJECT_CAT)
            this.$router.push({name: 'table', params: {
                databasename: task.databasename,
                cate: str,
                name: task.NAME,
                project_name: task.PROJECT_CAT
            }})
        },
        searchHandle() {
            search(this.keyword).then(res=>{
                this.data = res.data
            })
        },
        closeHandle() {
            this.show = false;
        },
        async toggle() {
            let res  = await getUserList()
            this.userList = res.data.data
            this.show = true
        },
        async chooseUser(user) {
            this.name = user.NAME
            this.uid = user.ID
            this.page = 1;
            this.data = []
            await this.getTask()
            this.show = false
        },
        // 获取工程数据
        getTask() {
            console.log('sdfsdf')
            this.loading = true
            getTask(this.uid, this.page, this.pageSize).then(res=>{
                this.loading = false
                this.data = this.data.concat(res.data)
                this.page = +(res.curpage) + 1
                if(res.data.length < +(res.pagesize)) {
                    this.finished = true
                }
            }).catch(()=>{
                this.loading = false
                this.finished = true
            })
        }
    },
    mounted() {
        this.name = this.$route.params.name || getItem('name')
        this.uid = this.$route.params.uid || getItem('uid')
        // this.data = this.$route.params.data
        this.pageSize =  20
        this.loading = false
        this.getTask()
    }
}
</script>

<style scoped>
    .wrap {
        padding: 0 15px;
        box-sizing: border-box;
        
    }
    .wrap .icon{
        display: block;
        width: 12px;
        height: 14px;
        margin-right: 9px;
    }
    .user {
        height: 45px;
        width: 100%;
    }
    .name {
        color: #333;
    }
    .name span {
        color: #666;
    }
    .toggle {
        color: #2775E5;
    }
    .my-swipe {
        height: 118px;
    }
    .swiper-img {
        width: 100%;
        height: 100%;
    }
    .title {
        margin-top: 15px;
        font-weight: 700;
        color: #333;
    }
    .close-icon {
        position: absolute;
        top: -10px;
        right: 20px;
    }
    .task-title {
        color: #333;
    }
    .task-title .orange {
        font-size: 10px;
        padding: 2px;
        color: #F37D50;
        border: 1px dotted #F37D50;
    }
    .task-title .blue {
        font-size: 10px;
        padding: 2px;
        color: #5084F3;
        border: 1px dotted #5084F3;
    }
    .task-title .green {
        font-size: 10px;
        padding: 2px;
        color: #09B288;
        border: 1px dotted #09B288;
    }
    .task-total {
        line-height: 35px;
        color: #333;
        padding-left: 35px;
        box-sizing: border-box;
    }
</style>


